﻿@charset "utf-8";
@import url(../lib/layui/css/layui.css);

* {
    margin: 0;
    padding: 0;
    color: #FFF;
    overflow: hidden;
}

body {
    position: relative;
    background: #00222B;
    color: ghostwhite;
    /*filter: blur(4px);*/
}

canvas#canvas {
    display: block;
}

@font-face {
    font-family: 'sa-digital-number';
    src: url('/Content/X-admin/fonts/DigitalNumbers-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0px;
    padding: 0px;
}

.container {
    display: grid;
    grid-template-columns: 30vw 40vw 40vw;
    grid-template-rows: 8vh 16vh 14vh 31vh 31vh;
    /*min-width: 1200px;*/
    width: auto;
    /*width: 1200px;*/
    /*min-height: 600px;*/
    height: 100vh;
    background-image: url(/Content/Photos/background.png);
}

.header {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
    text-align: center;
    margin: 5px;
    font-size: 25px;
}

.top_left_div {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 4;
    margin: 7px;
    background-image: url('/Content/Photos/border.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    font-size: 25px;
    color: ghostwhite;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.top_left_header {
    height: 20%;
    width: 100%;
}

.scrollArea {
    height: 80%;
    width: 100%;
    overflow: hidden;
}

h1 {
    color: ghostwhite;
    letter-spacing: 25px;
    font-family: 'Microsoft YaHei UI';
}

.current_time_div {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
    margin: 7px;
    /*background-color: red;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.time_center_div {
    /*background-color: blue;*/
    /*position: relative;*/
    /*top: 50%;*/
    /*text-align: center;*/
    /*left: 50%;*/
    /*-ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/
}

.top_middle_div {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    margin: 7px;
    background-image: url('/Content/Photos/border.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
}

.left_LCD_digital_div {
    /*background-color: aqua;*/
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 7px;
}

.digital_font {
    font-family: sa-digital-number;
    font-size: 50px;
    font-style: italic;
    color: lightyellow;
    margin: 3px;
}

.digital_description_font {
    color: white;
    font-size: 20px;
    margin: 7px;
}

.right_LCD_digital_div {
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 7px;
}

.map_div {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 6;
    /*background-color: rgba(5,255,255,255);*/
}

/*带图片列表*/
.second_left_div {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 4;
    grid-row-end: 5;
    /*background-color: burlywood;*/
    margin: 7px;
    text-align: center;
    font-size: 22px;
    color: ghostwhite;
    /*overflow: hidden;*/
    height: 100%;
    width: 100%;
}

.image_text_list {
    /*list-style-type: none;*/
    margin-left: 20px;
    padding-left: 0px;
    display: inline-block;
    height: 80%;
    width: 100%;
    overflow: hidden;
}

    .image_text_list img {
        float: left;
    }

    .image_text_list p, h2 {
        text-align: right;
        display: inline-block;
        margin-left: 10px;
        padding: 0;
    }

/*甜甜圈*/
.third_left_div {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 5;
    grid-row-end: 6;
    margin: 7px;
    /*background-color: beige;*/
}

/*柱状图*/
.top_right_div {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
    margin: 7px;
    /*background-color: cadetblue;*/
}
 /*折线图*/
.second_right_div {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    margin: 7px;
    /*background-color: darkorchid;*/
}

/*南丁格尔玫瑰图*/
.third_right_div {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 6;
    margin: 7px;
    /*background-color: darkturquoise;*/
}
